<script>
import * as echarts from 'echarts'
import { markRaw } from 'vue'

let legendData = ["油耗", "电耗", "水耗", "行驶里程"]
let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
let seriesData = [
  487.51,
  559.53,
  644.56,
  896.67,
  1074.38,
  1271.84,
  1604.87,
  1994.59,
  2339.96,
  9976.08,
  3642.3,
  2723.55,
]
let seriesData1 = [
  17962.52,
  15055.58,
  12055.65,
  10055.51,
  1511.15,
  1671.5,
  1902.52,
  2268.84,
  2723.55,
  3001.28,
  2768.44,
  3642.3,

]
let seriesData2 = [
  13642.3,
  14167.98,
  14696.01,
  15830.95,
  16544.26,
  17366.64,
  18605.13,
  19370.21,
  18005.56,
  18392.8,
  18013.1,
  27223.55,
]
let seriesData3 = [
  2962.52,
  1055.58,
  1164.65,
  1324.51,
  1511.15,
  1671.5,
  1902.52,
  2268.84,
  2723.55,
  23001.28,
  1902.52,
  2723.55,
]
export default {
	props:{
		dataInfo: {
		  type: Array,
		  default: []
		},
	},
  data() {
    return {
      chartColumn: null,
      option: {
        backgroundColor: "#fff",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          height: '85%',
          containLabel: true
        },
        legend: {
          right: "0%",
          top: '2%',
          textStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        xAxis: {
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.4)"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: [{
          name: '',
          type: "value",
          inverse: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.3)',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0A5C95"
            }
          },
          axisLabel: {
            formatter: "{value}",
            color: '#333',
            fontSize: 12
          },
          nameTextStyle: {
            color: '#333',
            padding: [0, 0, 0, 15],
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        }],
        series: [
          {
            name: legendData[0],
            type: "line",
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            itemStyle: {
              color: `rgba(235, 86, 125, 1)`,
              lineStyle: {
                color: `rgba(235, 86, 125, 1)`,
                width: 1.5
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(235, 86, 125, 0.9)'
                }, {
                  offset: 1,
                  color: 'rgba(235, 86, 125, 0.3)'
                }]
              }
            },
            data: seriesData
          },
          {
            name: legendData[1],
            type: "line",
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            itemStyle: {
              color: `#FFDF04`,
              lineStyle: {
                color: `#FFDF04`,
                width: 1.5
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(250, 224, 76, 0.9)'
                }, {
                  offset: 1,
                  color: 'rgba(250, 224, 76, 0.1)'
                }]
              }
            },
            data: seriesData1
          },
          {
            name: legendData[2],
            type: "line",
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            itemStyle: {
              color: `#55b678`,
              lineStyle: {
                color: `#55b678`,
                width: 1.5
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(85, 182, 120, 0.9)'
                }, {
                  offset: 1,
                  color: 'rgba(85, 182, 120, 0.1)'
                }]
              }
            },
            data: seriesData2
          },
          {
            name: legendData[3],
            type: "line",
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            itemStyle: {
              color: `rgba(74, 116, 204, 1)`,
              lineStyle: {
                color: `rgba(74, 116, 204, 1)`,
                width: 1.5
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(74, 116, 204, 0.9)'
                }, {
                  offset: 1,
                  color: 'rgba(74, 116, 204, 0.1)'
                }]
              }
            },
            data: seriesData3
          }
          // 如有更多系列，请按照同样方式添加
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chartColumn = markRaw(echarts.init(this.$refs['chartColumn']))
      this.chartColumn.resize()
      this.chartColumn.setOption(this.option)
    }
  }
}


</script>

<template>
  <div ref="chartColumn" className="echarts"></div>
</template>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>